import React from 'react';
import { Card, Button, Icon,Radio } from 'antd'
import './ui.less'

export default class Buttons extends React.Component {

  state = {
    loading: false.value,
    size:'default'
  }

  handleCloseLoading = () => {
    this.setState({
      loading: true
    })
  }

  handleChange = (e)=>{
    this.setState({
        size:e.target.value
    })
}

  render() {
    return (
      <div style={{width:100+'%'}}>
        <Card title="基础按钮">
          <Button type="primary">imooc</Button>
          <Button>imooc</Button>
          <Button type="dashed">imooc</Button>
          <Button type="danger">imooc</Button>
          <Button disabled>imooc</Button>
        </Card>
        <Card title="图形按钮">
          <Button icon="plus">创建</Button>
          <Button>imooc</Button>
          <Button icon="edit">编辑</Button>
          <Button icon="delete">删除</Button>
          <Button shape="round" icon="search">搜索</Button>
          <Button type="primary" icon="search">搜索</Button>
          <Button icon="download" type="primary">下载</Button>
        </Card>
        <Card title="Loading按钮">
          <Button type="primary" loading>确定</Button>
          <Button type="primary" loading shape="circle"></Button>
          <Button loading>点击加载</Button>
          <Button shape="circle" loading={this.state.loading}></Button>
          <Button type="primary" loading={this.state.loading} onClick={this.handleCloseLoading}>关闭</Button>
        </Card>
        <Card title="按钮组">
          <Button.Group>
            <Button icon="left" type="primary">返回</Button>
            <Button type="primary">
              前进
            <Icon type="right"></Icon>
            </Button>
          </Button.Group>
        </Card>
        <Card title="按钮尺寸" className="card-wrap">
          <Radio.Group value={this.state.size} onChange={this.handleChange}>
            <Radio value="small">小</Radio>
            <Radio value="default">中</Radio>
            <Radio value="large">大</Radio>
          </Radio.Group>
          <Button type="primary" size={this.state.size}>Imooc</Button>
          <Button size={this.state.size}>Imooc</Button>
          <Button type="dashed" size={this.state.size}>Imooc</Button>
          <Button type="danger" size={this.state.size}>Imooc</Button>
        </Card>
      </div>
    )
  }
}